<template>
  <div>
    <div class="main-title">
      <img src="/chuneng/img/title-border-1.png" />

      <cn-svg :viewbox="'0 0 600 500'" :svgstyle="'width: 400px'" :textname="'单体电池运行状态估计'"></cn-svg>

       <div
        style="
          position: relative;
          transform: translateY(-20px);
          padding-left: 17%;
        "
      >
        <input
          class="cell-input"
          type="select"
          placeholder="请输入电池串编号："
          ref="cell-input"
        />
        <div class="time-container">
          <span class="time-part date"></span>
          <span class="time-part time"></span>
        </div>
        <button class="btn-search" @click="fetch_data">查询</button>
      </div>
    </div>
    <div class="main-content">
      <back-1 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">健康状态</div>
          <div style="font-size: 16px">SOH</div>
        </div>
        <roll-chart :option="sohdata" :step2="2" :step1="15" :intv="2" />
      </back-1>
      <gap style="width: 15%" />
      <back-2 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">荷电状态</div>
          <div style="font-size: 16px">SOC</div>
        </div>
        <roll-chart :option="socdata" :step2="2" :step1="15" :intv="2" />
      </back-2>
      <gap style="width: 15%" />
      <back-3 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">剩余使用寿命</div>
          <div style="font-size: 16px">RUL</div>
        </div>
        <roll-chart :option="ruldata" :step2="2" :step1="15" :intv="2" />
      </back-3>
    </div>
  </div>
</template>

<script>
import Back1 from "./Back1.vue";
import Back2 from "./Back2.vue";
import Back3 from "./Back3.vue";
import Gap from "./Gap.vue";
import RollChart from "./RollChart.vue";
// import notify from "@/utils/notify";
// import { get_data, URL_MAP } from "@/utils/http";
// import RUL from "../assets/rul.json";
import { generateXAxis, generateYAxis } from "../utils/chart_tools";
import cnSvg from "./cn-svg.vue";
// import cnSearch from "./cn-search.vue";
import { mapGetters } from "vuex";
export default {
  components: { Back1, Back2, Back3, Gap, RollChart, cnSvg },
  data() {
    return {
      sohdata: {},
      socdata: {},
      ruldata: {},
      // cell: '1'
    };
  },
  computed: {
    ...mapGetters(["cell_data"]),
  },
  watch:{
    // eslint-disable-next-line
    cell_data(val){

      this.fetch_data();
    }
  },
  methods: {
    async fetch_data() {
      // let cell = this.$refs["cell-input"].value;
      // notify.notify(cell, 1)
      // const loading = this.$loading({
      //   lock: true,
      //   text: "加载中",
      //   spinner: "el-icon-loading",
      //   background: "rgba(0, 0, 0.3, 0.7)",
      // });
      let cell = this.$refs["cell-input"].value;
        // notify.notify(cell, 1)
      let data;
      if (cell === "") {
        data = this.cell_data[0];
      } else {
        try {
          cell = parseInt(cell) - 1;
            if(cell < 0) {
              cell = 0
            }
        } catch {
          // notify.notify("请输入正确的电池串编号", 1);
          cell = 0;
        }
        data = this.cell_data[cell % this.cell_data.length];
      }
      try {
        this.process_sohdata(data['SOH']);
        this.process_socdata(data['SOC']);
        this.process_ruldata(data['RUL']);
      } catch (e) {
        console.log(e);
      } 
    },

    process_sohdata(data) {
     

      let opt = {
        // 折线颜色修改,默认是蓝色
        color:['#66d0e3'],
        grid: {
          left: "20%",
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            name: "SOH",
            type: "line",
            data: data,
            showSymbol: false
          },
        ],
        yAxis: generateYAxis(),
      };
      this.sohdata = opt;
    },

    process_ruldata(data) {

      let opt = {
        grid: {
          left: "20%",
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            color: ['#66d0e3'],
            name: "RUL",
            type: "line",
            showSymbol: false,
  
            data: data.map(v => {
              if(v > 1){
                v = 1
              }
              return v
            }),
          },
        ],
        yAxis: generateYAxis(),
      };
      this.ruldata = opt;
    },
    process_socdata(data) {
      
      let opt = {
        // legend: {
        //   data: ["SOC预测值", "SOC真实值"],
        // },
        // 折线颜色修改,默认是蓝色
        color:['#66d0e3'],
        grid: {
          left: "20%",
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            name: "SOC",
            type: "line",
            data: data,
            showSymbol: false,
          },
        ],
        yAxis: generateYAxis(),
      };
      this.socdata = opt;
    },
  },

  mounted() {
    this.fetch_data();
  },
};
</script>

<style>
</style>